<template>
	<view class="settlement-container">
		<!-- 使用过渡组件包裹内容 -->
		<view class="content-wrapper">
			<!-- 收货地址 -->
			<view class="address-section animate-item" @tap="selectAddress">
				<view class="address-box">
					<view class="user-info">
						<text class="name">{{address.name}}</text>
						<text class="mobile">{{address.phone}}</text>
					</view>
					<view class="address">{{address.address}}</view>
				</view>
				<u-icon name="arrow-right" color="#999" size="24"></u-icon>
			</view>
			
			<!-- 商品列表 -->
			<view class="goods-section animate-item">
				<view class="section-title">
					<text>商品信息</text>
				</view>
				<view class="goods-item" v-for="(item, index) in goodsList" :key="item.id" :style="{ animationDelay: index * 0.1 + 's' }">
					<image class="goods-img" :src="item.image" mode="aspectFill"></image>
					<view class="goods-info">
						<text class="goods-name">{{item.name}}</text>
						<text class="goods-desc">{{item.description}}</text>
						<view class="price-box">
							<text class="current-price">￥{{ formatPrice(item.currentPrice) }}</text>
							<text class="original-price">￥{{ formatPrice(item.originalPrice) }}</text>
						</view>
						<view class="price-count">
							<text class="unit">{{item.unit}}</text>
							<text class="count">x{{item.count}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 订单信息 -->
			<view class="order-section animate-item">
				<view class="section-title">
					<text>订单信息</text>
				</view>
				<view class="order-item">
					<text>商品总价</text>
					<text>￥{{ formatPrice(originalTotalPrice) }}</text>
				</view>
				<view class="order-item">
					<text>商品优惠</text>
					<text class="discount">-￥{{ formatPrice(totalDiscountAmount) }}</text>
				</view>
				<view class="order-total">
					<text>实付金额</text>
					<text class="final-price">￥{{ formatPrice(finalPrice) }}</text>
				</view>
			</view>
		</view>
		
		<!-- 底部提交栏 -->
		<view class="footer">
			<view class="total">
				<text>合计</text>
				<text class="price">￥{{ formatPrice(finalPrice) }}</text>
			</view>
			<button class="submit-btn" @tap="submitOrder" hover-class="submit-hover">提交订单</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted, getCurrentInstance, onBeforeUnmount } from 'vue'
import { formatPrice } from '@/utils/baseUtils.js'
import { AddressUtils } from '../../utils/addressUtils'
import { WaitPaidOrderApi } from '../../utils/orderUtils'
import { UserUtils } from '../../utils/userUtils'

// 数据
const goodsList = ref([])
// 收货地址
const address = ref({})

// 页面加载时获取传递的数据
onMounted(() => {
	// 获取默认地址
	AddressUtils.getDefault(data => {address.value = data})
	// 获取传递的数据
	const instance = getCurrentInstance().proxy  
    const eventChannel = instance.getOpenerEventChannel();
	eventChannel.on('acceptDataFromOpenerPage', (data) => {goodsList.value = data.selectedItems})
	// 添加地址选择监听
	uni.$on('addressSelected', handleAddressSelected)
})

// 提交订单
const submitOrder = async () => {
	if (!address.value) {
		uni.showToast({title: '请选择收货地址', icon: 'none'})
		return
	}
	// 封装数据
	const order = {
		address: address.value,												// 收货地址
		products: goodsList.value,											// 商品列表
		totalPrice: formatPrice(originalTotalPrice.value),					// 商品原价总额
		totalDiscountAmount: formatPrice(totalDiscountAmount.value),		// 商品优惠总额
		finalPrice: formatPrice(finalPrice.value),							// 商品实付总额
	}
	// 创建订单
	WaitPaidOrderApi.createWaitPayOrder(order)
	.then(data => {
		// 重新加载本地用户历史订单
		UserUtils.reloadRecent((data) => {})
		// 跳转到待支付订单页面
		uni.redirectTo({url: "/pages/order/detail"})
	})
}

// 地址选择监听器
const handleAddressSelected = (selectedAddress) => {
	address.value = selectedAddress
}

// 组件卸载前移除监听器
onBeforeUnmount(() => {
	uni.$off('addressSelected', handleAddressSelected)
})

// 选择收货地址
const selectAddress = () => {
	uni.navigateTo({
		url: '/pages/address/list?select=1'
	})
}

// 计算商品原价总额
const originalTotalPrice = computed(() => {
	return goodsList.value.reduce((sum, item) => {
		return sum + item.originalPrice * item.count
	}, 0)
})

// 计算商品实付总额
const actualTotalPrice = computed(() => {
	return goodsList.value.reduce((sum, item) => {
		return sum + item.currentPrice * item.count
	}, 0)
})

// 计算总优惠金额
const totalDiscountAmount = computed(() => {
	return (Number(originalTotalPrice.value) - Number(actualTotalPrice.value))
})

// 计算最终价格（实付总额 + 运费）
const finalPrice = computed(() => {
	return (Number(actualTotalPrice.value))
})
</script>

<style lang="scss">
.settlement-container {
	min-height: 85vh;
	background: #f8f8f8;
	padding: 16rpx;
	padding-bottom: 120rpx;
	
	.content-wrapper {
		animation: fadeIn 0.3s ease-out;
	}
	
	.animate-item {
		animation: slideUp 0.4s ease-out;
		animation-fill-mode: both;
	}
	
	.address-section {
		background: #fff;
		padding: 24rpx;
		display: flex;
		align-items: center;
		border-radius: 12rpx;
		box-shadow: 0 1rpx 6rpx rgba(0,0,0,0.02);
		transition: transform 0.2s ease-out;
		
		&:active {
			transform: scale(0.99);
		}
		
		.address-box {
			flex: 1;
			
			.user-info {
				margin-bottom: 8rpx;
			}
			
			.name {
				font-size: 28rpx;
				margin-right: 20rpx;
				font-weight: 500;
			}
			
			.mobile {
				font-size: 26rpx;
				color: #666;
			}
			
			.address {
				font-size: 26rpx;
				color: #333;
				line-height: 1.4;
			}
		}
	}
	
	.goods-section {
		background: #fff;
		margin-top: 16rpx;
		border-radius: 12rpx;
		box-shadow: 0 1rpx 6rpx rgba(0,0,0,0.02);
		
		.section-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 24rpx;
			border-bottom: 1rpx solid #f5f5f5;
			
			text {
				font-size: 26rpx;
				color: #333;
				font-weight: 500;
			}
			
			.goods-count {
				color: #999;
				font-size: 22rpx;
				font-weight: normal;
			}
		}
		
		.goods-item {
			display: flex;
			padding: 20rpx 24rpx;
			border-bottom: 1rpx solid #f8f8f8;
			animation: slideInRight 0.4s ease-out;
			animation-fill-mode: both;
			
			&:last-child {
				border-bottom: none;
			}
			
			.goods-img {
				width: 140rpx;
				height: 140rpx;
				margin-right: 20rpx;
				border-radius: 8rpx;
				transition: transform 0.2s ease-out;
				
				&:active {
					transform: scale(0.98);
				}
			}
			
			.goods-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.goods-name {
					font-size: 28rpx;
					color: #333;
					line-height: 1.4;
					margin-bottom: 6rpx;
					// 最多显示两行
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				
				.goods-desc {
					font-size: 24rpx;
					color: #999;
					margin-bottom: 10rpx;
					// 最多显示一行
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				.price-box {
					margin-bottom: 10rpx;
					
					.current-price {
						color: #ff6700;
						font-size: 32rpx;
						font-weight: bold;
						margin-right: 10rpx;
					}
					
					.original-price {
						color: #999;
						font-size: 24rpx;
						text-decoration: line-through;
					}
				}
				
				.price-count {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.unit {
						color: #999;
						font-size: 24rpx;
					}
					
					.count {
						color: #666;
						font-size: 26rpx;
					}
				}
			}
		}
	}
	
	.order-section {
		background: #fff;
		margin-top: 16rpx;
		padding: 0;
		border-radius: 12rpx;
		box-shadow: 0 1rpx 6rpx rgba(0,0,0,0.02);
		animation: slideUp 0.4s ease-out;
		animation-fill-mode: both;
		
		.section-title {
			padding: 20rpx 24rpx;
			border-bottom: 1rpx solid #f5f5f5;
			
			text {
				font-size: 26rpx;
				color: #333;
				font-weight: 500;
			}
		}
		
		.order-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx 24rpx;
			font-size: 26rpx;
			color: #333;
			transition: background-color 0.2s;
			
			.discount {
				color: #ff6700;
			}
			
			&:active {
				background-color: #fafafa;
			}
		}
		
		.order-total {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 24rpx;
			font-size: 28rpx;
			color: #333;
			border-top: 1rpx solid #f5f5f5;
			font-weight: 500;
			animation: slideUp 0.4s ease-out;
			animation-fill-mode: both;
			
			.final-price {
				color: #ff6700;
				font-size: 32rpx;
			}
		}
	}
	
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		box-shadow: 0 -1rpx 6rpx rgba(0,0,0,0.02);
		animation: slideUpFooter 0.4s ease-out;
		
		.total {
			flex: 1;
			font-size: 26rpx;
			
			.price {
				color: #ff6700;
				font-size: 32rpx;
				font-weight: bold;
				margin-left: 8rpx;
			}
		}
		
		.submit-btn {
			width: 200rpx;
			height: 70rpx;
			background: #ff6700;
			color: #fff;
			border-radius: 35rpx;
			font-size: 26rpx;
			line-height: 70rpx;
			text-align: center;
			transition: all 0.2s;
			border: none;
			position: relative;
			overflow: hidden;
			
			&::after {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				width: 100%;
				height: 100%;
				background-color: rgba(255, 255, 255, 0.1);
				border-radius: 50%;
				transform: translate(-50%, -50%) scale(0);
				transition: transform 0.4s ease-out;
			}
			
			&:active::after {
				transform: translate(-50%, -50%) scale(2.5);
			}
		}
		
		.submit-hover {
			opacity: 0.9;
		}
	}
}

/* 动画关键帧 */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(20rpx);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideUpFooter {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}
</style> 